<template>
  <iframe
    @event1="event1"
    @event2="event2"
    :onload="onloadCode"
    src="about:blank"
    style="border: 1px solid; height: 300px; width: 100%"
  ></iframe>
</template>

<script>
export default {
  data() {
    return {
      onloadCode: `  
                const url = 'http://vjs.zencdn.net/v/oceans.mp4'  
                this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="controls" src="'+url+'"></video>';  
                const iframe = top.document.getElementsByTagName('iframe')[0]  
                var evObj = document.createEvent('MouseEvents');  
                evObj.initEvent( 'event1', true, false );  
                iframe.dispatchEvent(evObj)  
                `
    }
  },
  onShow() {},

  methods: {
    event1(a) {
      console.log(a)
    },
    event2(a) {
      console.log(a)
    }
  }
}
</script>

<style></style>
